<template>
  <view class="message-detail-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 消息内容 -->
    <view class="message-content">
      <!-- 消息头部 -->
      <view class="message-header">
        <view class="message-title">{{ message.title }}</view>
        <view class="message-meta">
          <text class="message-date">{{ message.createTime }}</text>
          <text class="message-level" :class="'level-' + message.noticeLevel" v-if="message.noticeLevel">
            {{ getLevelText(message.noticeLevel) }}
          </text>
        </view>
      </view>
      
      <!-- 消息正文 -->
      <view class="message-body">
        <rich-text :nodes="message.content"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      id: null,
      message: {
        title: '',
        content: '',
        createTime: '',
        noticeLevel: 1
      }
    }
  },
  
  onLoad(options) {
    if (options && options.id) {
      this.id = options.id
      this.loadMessageDetail()
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 加载消息详情
    async loadMessageDetail() {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/notice/notice/${this.id}`,
          method: 'GET'
        })
        
        if (res.data.code === 200) {
          const data = res.data.data
          this.message = {
            title: data.noticeTitle,
            content: data.noticeContent,
            createTime: this.formatDate(data.createTime),
            noticeLevel: data.noticeLevel
          }
        } else {
          throw new Error(res.data.msg || '获取消息详情失败')
        }
      } catch (err) {
        console.error('获取消息详情失败:', err)
        uni.showToast({
          title: '获取消息详情失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    // 获取消息级别文本
    getLevelText(level) {
      const levelMap = {
        1: '普通',
        2: '重要',
        3: '紧急'
      }
      return levelMap[level] || '普通'
    }
  }
}
</script>

<style lang="scss" scoped>
.message-detail-container {
  min-height: 100vh;
  background: #FFFFFF;
  
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    border-bottom: 1rpx solid #F5F5F5;
    
    .left-icon {
      padding: 20rpx;
      margin-left: -20rpx;
      
      .icon-back {
        font-size: 40rpx;
        color: #333333;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      margin-right: 56rpx;
    }
  }
  
  .message-content {
    padding: 40rpx;
    
    .message-header {
      margin-bottom: 50rpx;
      
      .message-title {
        font-size: 42rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 24rpx;
        line-height: 1.4;
      }
      
      .message-meta {
        display: flex;
        align-items: center;
        
        .message-date {
          font-size: 28rpx;
          color: #999999;
          margin-right: 20rpx;
        }
        
        .message-level {
          font-size: 26rpx;
          color: #FFFFFF;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
          
          &.level-1 {
            background: #2B87FF;
          }
          
          &.level-2 {
            background: #FF9500;
          }
          
          &.level-3 {
            background: #FF4B4B;
          }
        }
      }
    }
    
    .message-body {
      font-size: 32rpx;
      color: #333333;
      line-height: 1.8;
      
      :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 8rpx;
        margin: 20rpx 0;
      }
      
      :deep(p) {
        margin-bottom: 24rpx;
      }
      
      :deep(a) {
        color: #2B87FF;
        text-decoration: none;
      }
    }
  }
}
</style> 